@extends('admin.main')

@section('content')
    <div class="wrapper wrapper-content">
        <div class="ibox">
            <div class="ibox-title">
                <h5>用户列表</h5>
            </div>
            <div class="ibox-content">
                <div class="m-b">
                    <a href="javascript:;" id="btnCreate" class="btn btn-warning"> <i class="fa fa-plus"></i>
                        新建用户
                    </a>
                    <a href="javascript:;" id="btnImport" class="btn btn-info m-l-xs"> <i class="fa fa-file-excel-o"></i>
                        导入用户
                    </a>
                </div>
                <div id="tblDataList">
                    <p class="ibox-loading-31"></p>
                </div>
            </div>
        </div>
    </div>

    <script id="tplDataList" type="text/html">
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>用户名</th>
                    <th>昵称</th>
                    <th>性别</th>
                    <th>邮箱</th>
                    <th>手机</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @{{each data row i}}
                <tr data-id="@{{row.id}}">
                    <td>@{{row.id}}</td>
                    <td>@{{row.username}}</td>
                    <td>@{{row.nickname}}</td>
                    <td>@{{row.sex}}</td>
                    <td>@{{row.email}}</td>
                    <td>@{{row.mobile}}</td>
                    <td>
                        @{{if row.status==1 }}
                            <i class="fa fa-check-circle fa-lg text-success"></i>
                        @{{else}}
                            <i class="fa fa-times-circle fa-lg text-danger"></i>
                        @{{/if}}
                    </td>
                    <td>@{{row.created_at}}</td>
                    <td>
                        <div class="btn-group">
                            <button data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle">
                                操作
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu pull-right">
                                <li>
                                    <a href="javascript:;" class="js-edit">
                                        <i class="fa fa-pencil-square fa-lg"></i>
                                        编辑信息
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="js-loginlog">
                                        <i class="fa fa-th-list fa-lg"></i>
                                        登录日志
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="js-resetpwd">
                                        <i class="fa fa-key fa-lg"></i>
                                        重置密码
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="javascript:;" class="js-del">
                                        <i class="fa fa-times-circle fa-lg"></i>
                                        删除
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>
                @{{/each}}
            </tbody>
        </table>
        <div class="text-center">@{{@page_str}}</div>
    </script>

    <script id="tplUserLoginLogList" type="text/html">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title">登录日志</h4>
                </div>
                <div class="modal-body">
                    <table class="table table-hover table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>时间</th>
                                <th>来源</th>
                            </tr>
                        </thead>
                        <tbody>
                            @{{each rows row i}}
                            <tr data-id="@{{row.id}}">
                                <td>@{{i+1}}</td>
                                <td>@{{row.login_at}}</td>
                                <td>@{{row.login_ip}}</td>
                            </tr>
                            @{{/each}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </script>

    <script id="tplUploadFile" type="text/html">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title">导入用户</h4>
                </div>
                <div class="modal-body">
                    <form id="formUpfile" method="post" enctype="multipart/form-data" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">模板文件</label>
                            <div class="col-sm-9">
                                <p class="form-control-static">
                                    <a href="{{asset('upload/users_template.xls')}}" target="_blank">[点击下载]</a>
                                </p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">选择文件</label>
                            <div class="col-sm-9">
                                <input name="file1" type="file" class="form-control" />
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-9 col-sm-offset-3">
                                <button type="submit" class="btn btn-primary btn-w-m"> <i class="fa fa-upload"></i>
                                    立即导入
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </script>

    <script id="tplResetPassword" type="text/html">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title">重置密码</h4>
                </div>
                <div class="modal-body">
                    <form id="formResetPassword" method="post">
                        <div class="form-group">
                            <label class="control-label">新密码</label>
                            <input type="password" name="password" class="form-control" required="" autofocus="" />
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <input type="hidden" name="id" value="@{{id}}" />
                            <button class="btn btn-primary btn-w-m" type="submit">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </script>

    <script id="tplAddUserPanel" type="text/html">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title">新建用户</h4>
                </div>
                <div class="modal-body">
                    <form id="formAddUser" method="post" class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">帐户</label>
                            <div class="col-sm-4">
                                <input type="text" name="username" class="form-control" required="" autofocus />
                            </div>
                            <label class="col-sm-2 control-label">昵称</label>
                            <div class="col-sm-4">
                                <input type="text" name="nickname" class="form-control" required="" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-4">
                                <input type="password" name="password" class="form-control" required="" />
                            </div>
                            <label class="col-sm-2 control-label">确认密码</label>
                            <div class="col-sm-4">
                                <input type="password" name="repassword" class="form-control" required="" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-4">
                                <input type="email" name="email" class="form-control" />
                            </div>
                            <label class="col-sm-2 control-label">手机</label>
                            <div class="col-sm-4">
                                <input type="text" name="mobile" class="form-control" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">身份证号</label>
                            <div class="col-sm-5">
                                <input type="text" name="card_id" class="form-control" />
                            </div>
                            <div class="col-sm-2">
                                <select name="sex" class="form-control">
                                    <option value="男" selected>男</option>
                                    <option value="女">女</option>
                                    <option value="保密">保密</option>
                                </select>
                            </div>
                            <div class="col-sm-2">
                                <select name="status" class="form-control">
                                    <option value="1" selected>启用</option>
                                    <option value="0">禁用</option>
                                </select>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button class="btn btn-primary btn-w-m" type="submit">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </script>

    <script id="tplEditUserPanel" type="text/html">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">编辑用户</h4>
                </div>
                <div class="modal-body">
                    <form id="formEditUser" method="post" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">帐户</label>
                            <div class="col-sm-4">
                                <input type="text" value="@{{username}}" class="form-control" readonly="" />
                            </div>
                            <label class="col-sm-2 control-label">昵称</label>
                            <div class="col-sm-4">
                                <input type="text" name="nickname" value="@{{nickname}}" class="form-control" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-4">
                                <input type="email" name="email" value="@{{email}}" class="form-control" />
                            </div>
                            <label class="col-sm-2 control-label">手机</label>
                            <div class="col-sm-4">
                                <input type="text" name="mobile" value="@{{mobile}}" class="form-control" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">身份证号</label>
                            <div class="col-sm-5">
                                <input type="text" name="card_id" value="@{{card_id}}" class="form-control" />
                            </div>
                            <div class="col-sm-2">
                                <select name="status" class="form-control">
                                    <option value="1"@{{if status==1}} selected@{{/if}}>启用</option>
                                    <option value="0"@{{if status==0}} selected@{{/if}}>禁用</option>
                                </select>
                            </div>
                            <div class="col-sm-2">
                                <select name="sex" class="form-control">
                                    <option value="男"@{{if sex=='男'}} selected@{{/if}}>男</option>
                                    <option value="女"@{{if sex=='女'}} selected@{{/if}}>女</option>
                                    <option value="保密"@{{if sex=='保密'}} selected@{{/if}}>保密</option>
                                </select>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <input type="hidden" name="id" value="@{{id}}" />
                                <button class="btn btn-primary btn-w-m" type="submit">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </script>
@endsection

@section('pagescript')
    <script>
        $("#side-menu li[rel='entrust']").addClass("active")
            .find("ul").addClass("in")
            .find("li[rel='user']").addClass("active");

        seajs.use('models/entrustModel', function(entrustModel) {
            var filter = {limit: 12, page: 1};
            var renderList = function() {
                $("#tblDataList").html('<p class="ibox-loading-31"></p>');
                entrustModel.getUserPageRows(filter, function(data) {
                    data.page_str = page(data.last_page, data.total, data.current_page);
                    $("#tblDataList").html(template('tplDataList', data));
                }, failure);
            };
            renderList();

            $("#tblDataList").on("click", ".pagination a", function() {
                filter.page = $(this).attr("rel");
                renderList();
            });

            $("#btnImport").on("click", function(){
                $("#modalDialog").html(template("tplUploadFile")).modal("show");
            });

            $("#modalDialog").on('submit', "#formUpfile", function(){
                var file = this.file1.value;
                if (file == ""){
                    alert("请选择上传文件！");
                    return false;
                }
                if (file.lastIndexOf(".") == -1){
                    alert("文件类型不正确！");
                    return false;
                }
                var ext = file.substr(file.lastIndexOf(".") + 1).toLowerCase();
                if (ext != 'xls' && ext != 'xlsx'){
                    alert('无效的文件类型！');
                    return false;
                }
                var data = new FormData();
                data.append('file1', this.file1.files[0]);
                entrustModel.importUser(data, function(){
                    $("#modalDialog").html("").modal('hide');
                    renderList();
                }, failure);
                return false;
            });

            $("#tblDataList").on("click", ".js-loginlog", function(){
                var id = $(this).parents('tr').eq(0).data('id');
                entrustModel.getLoginlog({"id":id}, function(data){
                    $("#modalDialog").html(template("tplUserLoginLogList", data)).modal("show");
                }, failure);
            });

            $("#tblDataList").on("click", ".js-resetpwd", function(){
                var id = $(this).parents('tr').eq(0).data('id');
                $("#modalDialog").html(template("tplResetPassword", {"id":id})).modal("show");
            });

            $("#modalDialog").on("submit", "#formResetPassword", function(){
                entrustModel.updateUser($(this).serialize(), function(data){
                    $("#modalDialog").html("").modal('hide');
                    artInfo('密码修改成功');
                }, failure);
                return false;
            });

            $("#btnCreate").on("click", function () {
                $("#modalDialog").html(template("tplAddUserPanel")).modal("show");
            });

            $('#modalDialog').on('submit', '#formAddUser', function(){
                if(this.password.value != this.repassword.value){
                    alert('确认密码有误！');
                    this.repassword.focus();
                    return false;
                }
                entrustModel.insertUser($(this).serialize(), function(data){
                    $("#modalDialog").html('').modal('hide');
                    renderList();
                }, failure);
                return false;
            });

            $("#tblDataList").on("click", ".js-edit", function(){
                var id = $(this).parents("tr").eq(0).data("id");
                entrustModel.getMemberInfo({"user_id":id}, function(data){
                    $("#modalDialog").html(template("tplEditUserPanel", data)).modal("show");
                }, failure);
            });

            $('#modalDialog').on('submit', '#formEditUser', function(){
                entrustModel.updateUser($(this).serialize(), function(data){
                    renderList();
                    $("#modalDialog").html('').modal('hide');
                }, failure);
                return false;
            });

            $("#tblDataList").on('click', '.js-del', function(e) {
                var id = $(this).parents('tr').eq(0).data('id');
                layer.confirm("确定要删除此用户吗？", {icon: 3}, function(index) {
                    entrustModel.deleteUser({'id': id}, function() {
                        $(e.target).parents("tr").remove();
                        layer.close(index);
                    }, failure);
                });
            });
        });
    </script>
@endsection
